<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/footer.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <style>
        .content{padding: 15px;}
        .number{display: -webkit-box;display: box;}
        .number .left{width: 45px;line-height: 40px;font-size: 14px;}
        .number .center{-webkit-box-flex: 1;box-flex: 1;height: 40px;margin: 0 10px;}
        .number .center input{display: block;outline: none;width: 100%;border: 1px solid #ccc;height: 40px;
            text-indent: 10px;border-radius: 4px;}
        .number .right{width: 80px;line-height: 40px;font-size: 12px;color: #fff;background-color: #ffc10c;
            text-align: center;border-radius: 4px;}

        .code{margin-top: 15px;}
        .code input{display: block;outline: none;width: 100%;border: 1px solid #ccc;height: 40px;
            border-radius: 4px;text-indent: 10px;}
        .title{font-size: 13px;margin-top: 15px;color: #666;}
        .btn{}
        .btn button{display: block;width: 100%;-webkit-appearance: none;border: none;outline: none;height: 45px;color: #fff;background-color: #ffc10c;
            font-size: 18px;}
        .footer{margin-top: 40%;height: auto;}
        .footer .f-title{position: relative;}
        .footer .f-title span{font-size: 12px;display: inline-block;position: absolute;left: 50%;transform: translateX(-50%);
            -webkit-transform: translateX(-50%);color: #999;line-height: 12px;top: -6px;background-color: #fff;
            padding: 0 15px;z-index: 9999;}
        .footer a{display: block;text-align: center;padding: 30px;}
        .footer a i{font-size: 36px;color: #45ac36;}
        .footer a p{font-size: 12px;color: #666;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">登录</div>
        </div>
    </header>
    <div class="content">
        <div class="number">
            <div class="left">手机号</div>
            <div class="center">
                <input type="number"/>
            </div>
            <div class="right verify-btn verify-btn-no">获取验证码</div>
        </div>
        <div class="code">
            <input type="number" placeholder="验证码"/>
        </div>
        <p class="title">温馨提示：未注册账号的手机号，登录时将自动注册。</p>
    </div>
    <div class="btn">
        <button type="button">登录</button>
    </div>
    <footer class="footer">
        <div class="f-title top-line">
            <span>第三方登录</span>
        </div>
        <div class="weixin">
            <a href="">
                <i class="iconfont icon-weixin"></i>
                <p>微信</p>
            </a>
        </div>
    </footer>
</body>
<script>

    //    短信验证按钮倒计时
    function jishi(){
        var btn = $('.verify-btn');
        if(!btn.hasClass('count')){
            var s = 60;
            btn.addClass('count').css({"background-color":"#ccc"}).html(s+"s后重新发送");
            var count = setInterval(function(){
                s--;
                btn.html(s+"s后重新发送");
            },1000);
            setTimeout(function(){
                clearInterval(count);
                btn.removeClass("count").css({"background-color":""}).html("重新发送");
            },60000);
        }
    }
    $('.verify-btn').on('click',function(){
        var phone = $('.center input').val().trim();
        if(phone == "" || phone == null){
            alert("请输入手机号！");
            return
        }
        if(!/^1[34578]{1}[0-9]{9}$/.test(phone)){
            alert("电话格式不正确，请重新输入！");
            return
        }
        jishi()
    });
    $('.btn button').click(function(){

    })
</script>
</html>